   <!--1:实现  全选 全不选 功能（通过点击 全选 按钮）<br/>
   2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；<br/>
   3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。<br/>
   4：不能采用固定value 的方式，比如$(":checkbox[value=1001]")这样的格式-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.12.4.js" ></script>
<script>
  //$(":checkbox[value=101]").click(xxxx);
  
  $(function(){
  	
	 $("input[type='button']").click(function(){
	 	
	 //if($("[type='checkbox']").is(':checked')){
	 	var o=$("[type='checkbox']");
	 	var count=0;
	 	for(var j=0;j<o.length;j++){
	 		if($(o[j]).is(':checked')){
	 			count++;	
	 		}
	 	}
	 	if(count==o.length){
	 		$("input[type='checkbox']").prop("checked",false);
	 	}
	 	else{
	 		$("input[type='checkbox']").prop("checked",true);
	 	}
	 });
	 $("h2 input").click(function(){
	 	var i=$(this).index('h2 input');
		if(($("body").find("h2").eq(i).children()).is(':checked')){
			$("body").find("p").eq(i).children().prop("checked",true);
		}
		else{
			$("body").find("p").eq(i).children().prop("checked",false);
		}
	 });
			$("body").find("p").eq(0).children().click(function(){
				if($("body").find("p").eq(0).children().is(':checked')){
					$("body").find("h2").eq(0).children().prop("checked",true);
				}
				var p=$("body").find("p").eq(0).children();
				var count3=0;
				for(var k=0;k<p.length;k++){
					if($(p[k]).is(':checked')){
						count3++;
					}
				}
				if(count3==0){
					$("body").find("h2").eq(0).children().prop("checked",false);
				}
			});
			$("body").find("p").eq(1).children().click(function(){
				if($("body").find("p").eq(1).children().is(':checked')){
					$("body").find("h2").eq(1).children().prop("checked",true);
				}
				var p=$("body").find("p").eq(1).children();
				var count3=0;
				for(var k=0;k<p.length;k++){
					if($(p[k]).is(':checked')){
						count3++;
					}
				}
				if(count3==0){
					$("body").find("h2").eq(1).children().prop("checked",false);
				}
			});
			$("body").find("p").eq(2).children().click(function(){
				if($("body").find("p").eq(2).children().is(':checked')){
					$("body").find("h2").eq(2).children().prop("checked",true);
				}
				var p=$("body").find("p").eq(2).children();
				var count3=0;
				for(var k=0;k<p.length;k++){
					if($(p[k]).is(':checked')){
						count3++;
					}
				}
				if(count3==0){
					$("body").find("h2").eq(2).children().prop("checked",false);
				}
			});

	 });
</script>
<title>无标题文档</title>
</head>

<body>
<div id="menu">
 <h2><input type="checkbox" name="role" value="101"/>系统管理</h2>
 <p>
 	<input type="checkbox" name="role" value="101001"/>用户管理
    <input type="checkbox" name="role" value="101002"/>参数管理
    <input type="checkbox" name="role" value="101003"/>权限管理
    <input type="checkbox" name="role" value="101004"/>日常管理
    <input type="checkbox" name="role" value="101005"/>财务管理
 </p>
 <hr/>
 <h2><input type="checkbox" name="role" value="102"/>鲜花订单管理</h2>
 <p>
 	<input type="checkbox" name="role" value="102032"/>增加订单
    <input type="checkbox" name="role" value="102013"/>订单发货
    <input type="checkbox" name="role" value="102015"/>在线结算
    <input type="checkbox" name="role" value="102016"/>原料管理 
 </p>
 <hr/>
 <h2><input type="checkbox" name="role" value="103"/>客户管理</h2>
 <p>
 	<input type="checkbox" name="role" value="103032"/>增加用户
    <input type="checkbox" name="role" value="103032"/>查找用户
    <input type="checkbox" name="role" value="103012"/>用户维护
    <input type="checkbox" name="role" value="103012"/>生日祝贺
    <input type="checkbox" name="role" value="103012"/>删除用户
 </p>
</div>
 <p>
  <input  type="button" value="全选"/>
  <input type="submit" value="提交"/>
  <input type="reset" value="重置"/>
 </p>
 <hr/>
</body>
</html>
